<template>
	<view class="student-archives">
		<view class="title bold" v-if="num != ''">我的学员({{num}}人)</view>
		<u-index-list :index-list="indexList" :topHeight="50">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
				<!-- #endif -->

				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
					<!-- #endif -->
					<!-- <view class="list-cell flex-align" v-for="cell in item"> -->
					<view class="list-cell flex-align" v-for="(item1, index1) in item" :key="index1">
						<u-avatar :src="item1.head_img" size="90rpx"></u-avatar>
						<view class="right flex-grow-1">
							<view class="name">{{ item1.name }}</view>
							<view class="phone">{{ item1.mobile }}</view>
						</view>
						<view class="rightlist flex-grow-1">
							<image style="width: 30rpx; height: 30rpx;margin-left: 10%;" :src="shanchu" mode=""
								@click="delStudent(item1)"></image>
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>

		<view class="bottom-add-btn">
			<u-button text="添加学员" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const index = require('@/api/train/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {

		data() {
			return {
				itemArr: [],
				itemlist: [],
				num: '',
				bianji: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7886aba3ece8aae3b489b1944b48572a4f092c41.png',
				shanchu: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fe85ef51643a187a6090a929b34e93738e12e365.png',
				list_item: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z", "",'#'],
				indexList: [],
			}
		},
		onShow() {
			// this.selectStudent()
		},
		onLoad(options) {
			this.selectStudent()
		},
		methods: {

			async selectStudent() {
				let params = {
					page: 1,
					pageSize: 10,
					openid: uni.getStorageSync('openid'),
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await index.selectStudent(params)
				if (res.code == 1) {
					this.itemArr = res.data.train
					this.num = res.data.num
					let arr = []
					let brr = []
					let scc = []
					this.list_item.forEach((item, index) => {
						let tmp = []
						this.itemArr.forEach((value, index) => {

							if (value.initials == item) {
								tmp.push(value)
							}
						});
						scc.push(tmp)
					})
					this.itemArr = scc
				}
			},
			delStudent(item) {
				let that = this
				uni.showModal({
					title: '删除',
					content: '是否确定删除！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								project_id: getApp().globalData.projectId,
								app_id: that.$https.weixinAppId,
								id: item.id,
								openid: uni.getStorageSync('openid')
							}
							venues.delStudent(params).then(res => {
								if (res.code == 1) {
									console.log(res, '12312123')
									that.selectStudent()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// bfEdit(item1) {
			// 	console.log(item1, '132')
			// 	uni.navigateTo({
			// 		url: './add/add?id=' + item1.id +
			// 			"&friend_name=" +
			// 			item1.friend_name +
			// 			"&friend_phone=" +
			// 			item1.friend_phone +
			// 			"&type=" + 1 +
			// 			"&phone=" + item1.phone
			// 	});
			// },
			// bfEdit(item) {
			// 	// let field = JSON.stringify(item[0].student_info);
			// 	let field = item[0].student_info;
			// 	uni.navigateTo({
			// 		// url: '/page_venues/pages/student-archives/add/add?field=' + field,
			// 		url: '/page_venues/pages/student-archives/add/add?field='+encodeURIComponent(JSON.stringify(field))
			// 	});
			// },
			add() {
				uni.navigateTo({
					url: '/page_venues/pages/student-archives/add/add'
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.student-archives {
		padding: 0 34rpx;

		/deep/.u-index-list {
			scroll-view {
				height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
				;
			}
		}

		.title {
			font-size: 32rpx;
			height: 100rpx;
			padding-top: 40rpx;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 28rpx;
				background-color: #0072ff;
				margin-top: 2rpx;
				margin-right: 22rpx;
			}
		}

		.list-cell {
			padding: 24rpx 0;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 110rpx;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #f2f2f2;
			}

			.right {
				margin-left: 20rpx;
			}

			.rightlist {
				position: absolute;
				right: 40rpx;
				// margin-left: 40%;
			}

			.phone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #BEBEBE;
			}
		}
	}
</style>
